<template>
  <div id="mentlist"> 

     <div class="demo" :style="{  height: dtheight + 'px' }">


           <el-form ref="form"  label-width="80px">  
              <el-row> 
                  <el-col :span="12" style="display:flex;">

                    <el-form-item label="时间段" label-width="60px" style="margin-left:10px;">
                          <div style="display: flex;">
                                <el-date-picker  type="date"   placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form1.time1" style="width:150px;"></el-date-picker>
                                <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                                <el-date-picker  type="date"   placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form1.time2" style="width: 150px;"></el-date-picker>
                                <div class="custom_button2"  style="margin-left:10px;" @click="search_but1_a()"></div>
                          </div>
                    </el-form-item> 

                    <el-form-item label="时间" label-width="60px" style="margin-left:10px;">
                          <div style="display: flex;">
                                <el-date-picker  type="date"   placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form1.time3" style="width:150px;"></el-date-picker>
                                <div class="custom_button2"  style="margin-left:10px;" @click="search_but1_b()"></div>
                          </div>
                    </el-form-item>

                  </el-col>
                  <el-col :span="12" style="text-align: right;">  
                      <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;" @click="refresh_but1()">刷新</el-button>            
                    </el-col>             
              </el-row>   
        </el-form>


        <div class="databox">
            <div class="item1" v-for="(item,index) in mentdata1" :key="index"> 
                  <div class="top1">
                      <div class="top_item" style="flex: 1;">
                          <img class="top_img" :src="urlimg + item.level_logo" />
                          {{ item.title }}
                      </div>  
                     
                  </div>
                  <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">放出总数</div>
                          <div class="item_b_2">{{ item.all_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">放出总价</div>
                          <div class="item_b_2">{{ item.all_price }}</div>
                      </div>
                  </div>
            </div>
        </div>


      <el-form ref="form"  label-width="80px" style="margin-top:10px;">  
              <el-row> 
                  <el-col :span="12" style="display:flex;">

                    <el-form-item label="时间段" label-width="60px" style="margin-left:10px;">
                          <div style="display: flex;">
                                <el-date-picker  type="date"  placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form2.time1" style="width:150px;"></el-date-picker>
                                <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                                <el-date-picker  type="date"   placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form2.time2" style="width: 150px;"></el-date-picker>
                                <div class="custom_button2"  style="margin-left:10px;"  @click="search_but2_a()"></div>
                          </div>
                    </el-form-item> 

                     <el-form-item label="时间" label-width="60px" style="margin-left:10px;">
                          <div style="display: flex;">
                                <el-date-picker  type="date"  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form2.time3" style="width:150px;"></el-date-picker>
                                <div class="custom_button2"  style="margin-left:10px;"  @click="search_but2_b()"></div>
                          </div>
                    </el-form-item> 

                  </el-col>
                  <el-col :span="12" style="text-align: right;">  
                      <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;" @click="refresh_but2()">刷新</el-button>            
                    </el-col>             
              </el-row>   
        </el-form>

        <div class="databox">
            <div class="item" v-for="(item,index) in mentdata2" :key="index"> 
                  <div class="top">
                      <div class="top_item" style="flex: 1;">
                          <img class="top_img" :src="urlimg + item.level_logo" />
                          {{ item.title }}
                      </div>  
                       <div class="top_item">
                            <div class="top_item_but">
                              <span v-if="getTime(getTime_fm()) < getTime(item.open_second_start)">预约中</span>
                              <span v-if="getTime(item.open_second_start) < getTime(getTime_fm()) &&  getTime(getTime_fm())<getTime(item.open_second_end)">开放中</span>
                              <span v-if="getTime(getTime_fm()) > getTime(item.open_second_end)">关闭中</span>    
                            </div>                           
                        </div>
                  </div>
                  <div class="item_a">
                      <div class="item_b">
                          <div class="item_b_1">回收总数</div>
                          <div class="item_b_2">{{ item.all_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">回收总价</div>
                          <div class="item_b_2">{{ item.all_price }}</div>
                      </div>
                  </div>
            </div>
        </div>

        
        <el-form ref="form"  label-width="80px" style="margin-top:10px;">  
              <el-row> 
                  <el-col :span="12" style="display:flex;">

                    <el-form-item label="时间段" label-width="60px" style="margin-left:10px;">
                          <div style="display: flex;">
                                <el-date-picker  type="date"  placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form3.time1" style="width:150px;"></el-date-picker>
                                <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                                <el-date-picker  type="date"  placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form3.time2" style="width: 150px;"></el-date-picker>
                                <div class="custom_button2"  style="margin-left:10px;"  @click="search_but3_a()"></div>
                          </div>
                    </el-form-item> 

                    <el-form-item label="时间" label-width="60px" style="margin-left:10px;">
                          <div style="display: flex;">
                                <el-date-picker  type="date"  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form3.time3" style="width:150px;"></el-date-picker>
                                <div class="custom_button2"  style="margin-left:10px;"  @click="search_but3_b()"></div>
                          </div>
                    </el-form-item>

                  </el-col>
                  <el-col :span="12" style="text-align: right;">  
                      <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;" @click="refresh_but3()">刷新</el-button>            
                    </el-col>             
              </el-row>   
        </el-form>
        <div class="databox">
            <div class="item2" v-if="mentdata3.kmb"> 
                  <div class="top2">
                      <div class="top_item" style="flex: 1;">
                         蜜贝兑换
                      </div>  
                  </div>
                  <div class="item_a" style="display:flex;">
                      <div class="item_b">
                          <div class="item_b_1">申请数</div>
                          <div class="item_b_2">{{ mentdata3.kmb.apply_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">申请价值</div>
                          <div class="item_b_2">{{ mentdata3.kmb.apply_price }}</div>
                      </div>
                  </div>
                  <div class="item_a" style="display:flex;">
                      <div class="item_b">
                          <div class="item_b_1">完成数</div>
                          <div class="item_b_2">{{ mentdata3.kmb.complete_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">完成价值</div>
                          <div class="item_b_2">{{ mentdata3.kmb.complete_price }}</div>
                      </div>
                  </div>
            </div>
            <div class="item2" v-if="mentdata3.golden_eggs"> 
                  <div class="top2">
                      <div class="top_item" style="flex: 1;">
                          金蛋发放
                      </div>  
                  </div>
                  <div class="item_a" style="display:flex;">
                      <div class="item_b">
                          <div class="item_b_1">申请数</div>
                          <div class="item_b_2">{{ mentdata3.golden_eggs.apply_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">申请价值</div>
                          <div class="item_b_2">{{ mentdata3.golden_eggs.apply_price }}</div>
                      </div>
                  </div>
                  <div class="item_a" style="display:flex;">
                      <div class="item_b">
                          <div class="item_b_1">发放数</div>
                          <div class="item_b_2">{{ mentdata3.golden_eggs.send_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">发放价值</div>
                          <div class="item_b_2">{{ mentdata3.golden_eggs.send_price }}</div>
                      </div>
                  </div>
            </div>
             <div class="item2" v-if="mentdata3.color_eggs"> 
                  <div class="top2">
                      <div class="top_item" style="flex: 1;">
                         彩蛋发放
                      </div>  
                  </div>
                  <div class="item_a" style="display:flex;">
                      <div class="item_b">
                          <div class="item_b_1">申请数</div>
                          <div class="item_b_2">{{ mentdata3.color_eggs.apply_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">申请价值</div>
                          <div class="item_b_2">{{ mentdata3.color_eggs.apply_price }}</div>
                      </div>
                  </div>
                  <div class="item_a" style="display:flex;">
                      <div class="item_b">
                          <div class="item_b_1">发放数</div>
                          <div class="item_b_2">{{ mentdata3.color_eggs.send_count }}</div>
                      </div>
                      <div class="item_b" style="">
                          <div class="item_b_1">发放价值</div>
                          <div class="item_b_2">{{ mentdata3.color_eggs.send_price }}</div>
                      </div>
                  </div>
            </div>
        </div>
        


     



     </div>
   </div>
</template>

<script>

export default {
   name: 'mentlist',
  data () {
    return {
        dtheight:'500',  //窗口高度
        mentdata1:[],
        form1:{
          time1:'',
          time2:'',
          time3:'',
          type:0,
        },
        mentdata2:[],
        form2:{
          time1:'',
          time2:'',
          time3:'',
          type:0,
        },
        mentdata3:[],
        form3:{
          time1:'',
          time2:'',
          time3:'',
          type:0,
        },
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 200
     this.list_fun1()
     this.list_fun2()
     this.list_fun3()
  },
  mounted (){
    
  },
  methods: { 
    // list_fun1(){  //放出
    //     this.post("/onsale/statistics", {
    //         type:this.form1.type,
    //         start:this.form1.time1,
    //         end:this.form1.time2,
    //         onedate:this.form1.time3,
    //     }).then(res => {
    //       this.mentdata1 = res.result
    //       console.log(res,"dddd")
    //     })
    // },   
    list_fun1(){  //放出
        this.post("/goods_distribute/statistics", {
            type:this.form1.type,
            start:this.form1.time1,
            end:this.form1.time2,
            onedate:this.form1.time3,
        }).then(res => {
          this.mentdata1 = res.result
          //console.log(res,"dddd")
        })
    }, 
    list_fun2(){  //回收
        this.post("/recovery/statistics", {
            type:this.form2.type,
            start:this.form2.time1,
            end:this.form2.time2,
            onedate:this.form2.time3,
        }).then(res => {
          this.mentdata2 = res.result
          //console.log(res)
        })
    },
    list_fun3(){  //统计
        this.post("/integral/statistics", {
            type:this.form3.type,
            start:this.form3.time1,
            end:this.form3.time2,
            onedate:this.form3.time3,
        }).then(res => {
          this.mentdata3 = res.result
          // console.log(res,"ssss")
        })
    },
    search_but1_a(){
       this.form1.type = 1
       this.form1.time3 = ''
       this.list_fun1()
    },
    search_but1_b(){
       this.form1.type = 2
       this.form1.time1 = ''
       this.form1.time2 = ''
       this.list_fun1()
    },
    search_but2_a(){
       this.form2.type = 1
       this.form2.time3 = ''
       this.list_fun2()
    },
    search_but2_b(){
       this.form2.type = 2
       this.form2.time1 = ''
       this.form2.time2 = ''
       this.list_fun2()
    },   
    search_but3_a(){
       this.form3.type = 1
       this.form3.time3 = ''
       this.list_fun3()
    },
    search_but3_b(){
       this.form3.type = 2
       this.form3.time1 = ''
       this.form3.time2 = ''
       this.list_fun3()
    },
    refresh_but1(){
      this.form1.type = 0
      this.form1.time1=''
      this.form1.time2=''
      this.form1.time3=''
      this.list_fun1()
    },
    refresh_but2(){
      this.form2.type = 0
      this.form2.time1=''
      this.form2.time2=''
      this.form2.time3=''
      this.list_fun2()
    },
    refresh_but3(){
      this.form3.type = 0
      this.form3.time1=''
      this.form3.time2=''
      this.form3.time3=''
      this.list_fun3()
    },



  }
}
</script>


<style scoped>
.demo{
  overflow-y: auto;
}
.databox{
  display: flex;
}
.item:first-child{
  margin-left: 0px;
}
 .item{
   flex: 1;
   background: #FCFBF7;
   margin-top: 0px;
   /* padding:15px 15px 30px 15px; */
   box-sizing: border-box;
   float: left;
   margin-left: 30px;
   /* box-shadow: rgb(224, 233, 252) 2px 4px 9px; */
   height:300px;
 }

 .top{
    display: flex;
    background-color: #FBF3DE;
    padding:10px;
}
.item1:first-child{
  margin-left: 0px;
}
.item1{
   flex: 1;
   background: #F8F8FC;
   margin-top: 0px;
   /* padding:15px 15px 30px 15px; */
   box-sizing: border-box;
   float: left;
   margin-left: 30px;
   /* box-shadow: rgb(224, 233, 252) 2px 4px 9px; */
   height:300px;
}
.item2:first-child{
  margin-left: 0px;
}
 .item2{
   flex: 1;
   background: rgba(212, 166, 172, 0.1);
   margin-top: 0px;
   /* padding:15px 15px 30px 15px; */
   box-sizing: border-box;
   float: left;
   margin-left: 30px;
   /* box-shadow: rgb(224, 233, 252) 2px 4px 9px; */
   height:300px;
 }
 .top2{
     display: flex;
    background-color: rgba(212, 166, 172, 0.2);
    padding:10px;
 }
.top1{
    display: flex;
    background-color: #F0EFFF;
    padding:10px;
}
 .top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.item_a{
  /* display:flex; */
  margin-top: 20px;
  padding:0px 30px;
}
.item_b{
  flex: 1;
  margin-top:30px;
}
.item_b_1{
 
  font-size: 14px;
  font-weight: 500;
  color: #5E6C84;
}
.item_b_2{
  margin-top: 10px;
 
  font-size: 25px;
  font-weight: 500;
  color: #344563;
}
.top_item_but{
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    border-radius:3px;
    color:black;   
    /* background: #cdd5de; */
}
</style>